<template>
  <div class="anylysis">
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column align="center" label="任务id" prop="id" />
      <el-table-column align="center" label="任务名称" prop="task_name" />
      <el-table-column align="center" label="任务状态" prop="task_status" >
        <template #default="props">
            {{props.row.task_status==1?'未爬取':'已爬取'}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <template #default="props">
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click="handleMdf(props.row)"
            >修改</el-button
          > -->
          <el-button
            link
            type="primary"
            size="small"
            @click="handleDel(props.row.id)"
            >删除</el-button
          >
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="title">
      <!-- 话题关键词：{{ state.keyWord }} -->
      <el-button class="btn" @click="sendTask" type="primary"
        >创建任务</el-button
      >
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="修改任务"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="state.formInline" class="demo-form-inline">
        <el-form-item label="任务名称">
          <el-input
            v-model="state.formInline.taskName"
            placeholder="请输入任务名"
          />
        </el-form-item>
        <el-form-item v-show="state.type === 2" label="任务状态">
          <el-radio-group v-model="state.formInline.taskStatus">
            <el-radio :label="0">已爬取</el-radio>
            <el-radio :label="1">未爬取</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmMdf"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import {
  getWeiboAnalysis,
  getWeiboCount,
  getWeiboSearch,
  getWeiboTask,
  getWeiboSpider,
  modifyWeiboSpider,
  sendWeiboSpider,
  delWeiboSpider,
} from "@/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  tableData: [],
  keyWord: "",
  formInline: {},
  type: 1, //1-创建 2-修改
});

const imgSrc = ref(
  "https://wx4.sinaimg.cn/thumb150/005YTux9gy1gmd95ybhqbj32c0340x6r.jpg"
);
const dialogVisible = ref(false);
const imgList = ref([
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
]);
onMounted(() => {
  getData();
  //   getWeiboTask().then((res) => {
  //     if (res.status == "200" && res.data) {
  //       state.tableData = res.data.data;
  //       state.keyWord = state.tableData[0].search_info;
  //       console.log(state.tableData);
  //     }
  //   });
});
const getData = () => {
  getWeiboSpider().then((res) => {
    if (res.status == "200" && res.data) {
      state.tableData = res.data.data;
    }
    console.log(res, 234);
  });
};
const handleMdf = (row) => {
  dialogVisible.value = true;
  state.formInline.taskId = row.id;
  state.formInline.taskName = row.task_name;
  state.formInline.taskStatus = row.task_status;
  state.type = 2;
};
const handleClose = () => {
  dialogVisible.value = false;
};
const sendTask = () => {
  state.type === 1;
  dialogVisible.value = true;
  state.formInline.taskId = '';
  state.formInline.taskName = ''
};
const confirmMdf = () => {
  if (state.type === 2) {
    modifyWeiboSpider(state.formInline).then((res) => {
      console.log(res, "123344");
    });
  } else if (state.type === 1) {
    sendWeiboSpider({ taskName: state.formInline.taskName }).then((res) => {
      getData();
      ElMessage({
        message: "创建成功",
        type: "success",
      });
      console.log(res, "sendWeiboSpider");
    });
  }
  dialogVisible.value = false;
};
const handleDel = (id) => {
  delWeiboSpider(id).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    }
  });
};
</script>
<style lang='scss' scoped>
.anylysis {
  padding: 0 30px;
  .title {
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
    height: 50px;
    position: relative;
    .btn {
      font-weight: normal;
      cursor: pointer;
      // float: right;
      // margin-right: 20px;
      // line-height: 30px;
      position: absolute;
      right: 1%;
      bottom: 0;
    }
  }
  .text_t {
    font-weight: 600;
    font-size: 15px;
    line-height: 25px;
    color: #409eff;
  }
  .text {
    padding: 0 10px;
  }
}
</style>
